<template>
    <div class="order-log-container">
        <div class="header">
            <h2>订单日志管理</h2>
            <div class="search-section">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="流水号">
                        <el-input 
                            v-model="searchForm.orderStatementId" 
                            placeholder="请输入流水号"
                            clearable
                            @keyup.enter="handleSearch()"
                        />
                    </el-form-item>
                </el-form>
                <p>结果类型为false的可能需要人工介入，请及时处理，一般为退款未成功，或退款状态未知(支付宝响应失败)</p>
            </div>
        </div>

        <div class="table-section">
            <el-table
                v-loading="loading"
                :data="logList?.items"
                style="width: 100%"
                border
                stripe
            >
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="orderStatementId" label="流水号" width="120" />
                <el-table-column prop="ops" label="操作" width="550" show-overflow-tooltip />
                <el-table-column prop="result" label="结果" show-overflow-tooltip />
                <el-table-column prop="success" label="结果类型" width="100">
                    <template #default="{ row }">
                        <el-tag :type="row.success ? 'success' : 'danger'">
                            {{ row.success ? '成功' : '失败' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180">
                    <template #default="{ row }">
                        {{ formatTime(row.createTime) }}
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <div class="pagination-container">
            <el-pagination layout="prev, pager, next" v-model:current-page="searchForm.pageNo" :page-count="Number.parseInt(logList?.page ?? '0')" @update:current-page="getLogList()" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import request from '@/base/request'
import { ElMessage } from 'element-plus'
import formatTime from '@/utils/formatTime'
import OrderStatementLog from '@/types/vip/OrderStatementLog'
import Page from '@/base/page'
import OrderStatementLogParm from '@/types/vip/OrderStatementLogParm'
const loading = ref(false)
const logList = ref<Page<OrderStatementLog>>()

const searchForm = ref<OrderStatementLogParm>({
    pageNo: 1,
    pageSize: 10,
})

const handleSearch = () => {
    searchForm.value.pageNo = 1
    getLogList()
}

const getLogList = async () => {
    loading.value = true
    try {
        const response = await request.post('/trade/orderStatementLog/getOrderStatementLog', searchForm.value)
        if (response.data.code === 200) {
            logList.value = response.data.data
        } else {
            ElMessage.error(response.data.msg || '获取订单日志失败')
        }
    } catch (error) {
        ElMessage.error('获取订单日志失败')
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    getLogList()
})
</script>

<style scoped>
.order-log-container {
    padding: 20px;
}

.header {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
}

.search-section {
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color);
    box-shadow: var(--el-box-shadow-light);
}

.table-section {
    background-color: var(--el-bg-color);
    padding: 20px;
    border-radius: 4px;
    box-shadow: var(--el-box-shadow-light);
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

:deep(.el-table) {
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-header-bg-color: var(--el-fill-color-light);
}

/* 允许表格内容被选中 */
:deep(.el-table__body-wrapper) {
    user-select: text;
}

:deep(.el-table__cell) {
    user-select: text;
}

/* 优化选中时的样式 */
:deep(.el-table__body-wrapper)::selection {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-text-color-primary);
}

:deep(.el-table__cell)::selection {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-text-color-primary);
}
</style> 